<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function(){
		
	});
	function check(){
		var petName = $("#petName").val();
		var petBreed = $("#petBreed").val();
		var birthday = $("#birthday").val();
		if(petName==''){
			alert("昵称不能为空！");
			return false;
		}
		if(petBreed==0){
			alert("品种不能是默认选项“--请选择--”！");
			return false;
		}
		if(birthday.substring(4,5)!='-'&&birthday.substring(7,8)!='-'){
			alert("格式不正确!");
			return false;
		}
		return true;
	};
	function ajax(){
		var petName = $("#petName").val();
		$.getJSON("ByNameServlet","petName="+petName,function(data){
			if(data.count>0){
				$("#span").html("名字已存在！");
			}else {
				$("#span").html("名字可以使用！");	
			}
		});
	}
</script>
</head>
<body>
	<div style="width: 400px;margin: 0 auto;">
		<h3 style="text-align: center;">宠物的基本信息</h3>
		<form action="AddServlet" onsubmit="return check()">
			<table>
				<tr>
					<td>昵称：</td>
					<td><input type="text" name="petName" id="petName" onblur="ajax()"><span id="span"></span></td>
				</tr>
				<tr>
					<td>品种：</td>
					<td>
						<select name="petBreed" id="petBreed">
						<option value="0">--请选择--</option>
						<option value="1">狗</option>
						<option value="2">猫</option>
						<option value="3">鸟</option>
						<option value="4">兔</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" name="petSex" id="petSex" value="1" checked="checked">雄
						<input type="radio" name="petSex" id="petSex" value="2">雌
					</td>
				</tr>
				<tr>
					<td>出生日期：</td>
					<td><input type="" name="birthday" id="birthday">yyyy-MM-dd</td>
				</tr>
				<tr>
					<td>宠物描述：</td>
					<td><textarea rows="3" cols="30" name="description" id="description"></textarea></td>
				</tr>
				<tr>
					<td><input type="submit" value="提交">
					<input type="reset" value="重置"></td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>